<template>
	<view class="bi-driver-link-card">
		<view class="bi-driver-link-card__avatar">
			<ui-avatar :src="avatar" size="medium"></ui-avatar>
		</view>
		<view class="bi-driver-link-card__name">{{ name }}</view>
		<view class="bi-driver-link-card__call">
			<bi-call-phone :value="mobile">
				<template slot="handle" slot-scope="{ disabled }">
					<view class="bi-driver-link-card__call-handle" :class="{'is-disabled' : disabled}">打电话</view>
				</template>
			</bi-call-phone>
		</view>
	</view>
</template>

<script>
	import BiCallPhone from '@/common/call-phone/call-phone.vue'
	
	export default {
		name: 'BiDriverLinkCard',
		components: {
			BiCallPhone
		},
		props: {
			avatar: {
				type: String
			},
			name: {
				type: String
			},
			mobile: {
				type: [String, Number]
			}
		}
	}
</script>

<style lang="less">
.bi-driver-link-card{
	padding: 12px;
	border-radius: 8px;
	background-color: #F3F4F6;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.7em;
}
.bi-driver-link-card__avatar{
	margin-bottom: 3px;
}
.bi-driver-link-card__name{
	font-size: 12px;
	margin-bottom: 2px;
}
.bi-driver-link-card__call-handle{
	height: 22px;
	line-height: 22px;
	background-color: #40CC6C;
	border-radius: 11px;
	font-size: 12px; 
	color: #fff;
	padding: 0 12px;
	vertical-align: top;
	&.is-disabled{
		opacity: .6;
	}
}
</style>